<template>
  <div>
    <div>
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </div>
    <el-table :data="list" border :stripe="true" style="width: 100%;margin:5px auto 0px">
      <el-table-column
        type="index"
        label="编号"
        width="80"
      />
      <el-table-column
        prop="title"
        label="名称"
      />
      <el-table-column
        width="100"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small">编辑</el-button>
          <el-button type="text" size="small" @click.native.prevent="handleDelete(scope.row.id,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 抽屉 -->
    <el-drawer size="30%" title="我是标题" :with-header="false" :visible.sync="addDrawer" direction="rtl">
      <add @closedrawer="closeAddDrawer" />
    </el-drawer>
  </div>
</template>
<script>

import { getAllList, remove } from '@/api/designTool'
import add from '@/views/designTool/add.vue'
export default {
  components: {
    add
  },
  data() {
    return {
      list: [
        { id: '02000', title: 'PhotoShop' },
        { id: '23295', title: 'VS code' }
      ],
      addDrawer: false // 抽屉开关
    }
  },
  created() {
    this.getlist()
  },
  methods: {
    async getlist() {
      this.list = (await getAllList()).data
    },

    handleAdd() {
      this.addDrawer = true
    },
    closeAddDrawer() {
      this.addDrawer = false
      this.getlist()
    },
    handleDelete(id, row) {
      this.$confirm(`确定要删除“${row.title}”吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(id).then(res => {
          this.$message({
            message: '删除完成！',
            type: 'success'
          })
          this.getlist()
        })
      })
    }

  }
}
</script>
